<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" :content="`${this.$route.query.name}`">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item v-for="(i,index) in options" :key="i.id">
          <div :style="{ borderBottom: '1px solid #E9E9E9' }">
            <!-- <a-checkbox :indeterminate="indeterminateMoney[index]" :checked="checkAllMoney[index]" @change="(e) => { onCheckAllChange(e, i,index) }"> -->
            {{ i.name }}
            <!-- </a-checkbox> -->
          </div>
          <a-radio-group v-model="checkedRadioList[index]" v-if="options[index].type == 0" :options="options[index].memLabelList.map((item)=>{ return { label:item.name, value:item.id} })" @change="(e) => { onRadioChange(e,i,index) }"/>
          <a-checkbox-group v-model="checkedMoenyList" v-if="options[index].type == 1" :options="options[index].memLabelList.map((item)=>{ return { label:item.name, value:item.id} })" @change="(e) => { onChange(e,i,index) }" />
        </a-form-item>
        <a-divider />
        <a-form-item :wrapperCol="{ span: 16 }" style="text-align: left">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getMemberGroupUsingGET,updateMemLabelUsingPOST,getMemberUsingGET } from '@/api/api/huiyuanguanli.ts'

export default {
  name: 'MemberListMarkForm',
  data() {
    return {
      form: this.$form.createForm(this),
      loading:false,
      queryParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
      options:[],
      plainOptions: [],
      checkedRadioList:[],
      checkedMoenyList: [],
      checkList:[],
      checkedCardList: [],
      checkedTurnList: [],
      checkedDiffList: [],
      indeterminateMoney: [],
      indeterminateCard: false,
      indeterminateTurn: false,
      indeterminateDiff: false,
      checkAllMoney: [],
      checkAllCard: false,
      checkAllTurn: false,
      checkAllDiff: false,
    }
  },
  mounted(){
    this.handelInfo()
  },
  methods: {
    handleDetail() {
      getMemberUsingGET({ id: this.$route.params.id })
        .then((res) => {
         this.checkedMoenyList = res.data.memLabelList.map((item)=> item.id)
         res.data.memLabelList.forEach(element => {
          this.checkedRadioList[this.options.map((item)=> item.id).indexOf(element.groupId)] = element.id
         })
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handelInfo(){
      getMemberGroupUsingGET({...this.queryParam}).then((res) => {
        this.options = res.data.list
        this.handleDetail()
      })
      .catch((error) => {
        this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
      })
    },
    onChange(checkedList, i,index) {
      this.checkList[index] = checkedList
      this.checkedMoenyList = this.checkList.flat()
      this.indeterminateMoney[index] = !!checkedList.length && checkedList.length < this.options[index]?.memLabelList.length
      this.checkAllMoney[index] = checkedList.length ===  this.options[index]?.memLabelList.length
    },
    onRadioChange(checkedList, i,index) {
      this.checkList[index] = checkedList.target.value
      this.checkedRadioList[index] = checkedList.target.value
    },
    onCheckAllChange(e, i,index) {
      this.checkAllMoney[index] = e.target.checked
      this.indeterminateMoney[index] = false
      this.checkList[index] = e.target.checked ? this.options[index]?.memLabelList?.map((item) => item.id) : [],
      this.checkedMoenyList = this.checkList.flat()
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          const arr1 =  this.checkedMoenyList.map((i) => {
              return { labelId: i }
            })
          const arr2 =  this.checkedRadioList.map((i) => {
              return { labelId: i }
            })
          const concatArr = [...arr1,...arr2]
          const params = concatArr.filter((item, index) => concatArr.findIndex(i => i?.labelId === item?.labelId) === index)
          updateMemLabelUsingPOST(
            { memberId: this.$route.params.id },
            params.filter((item)=>item))
            .then(() => {
              this.loading = false
              this.$message.success('操作成功')
              this.$router.back()
              // 重置表单数据
              this.form.resetFields()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
}
</script>
